<template>
    <div>
        <Header></Header>
        <div class="block">
            <el-timeline>
                <el-timeline-item :timestamp="blog.created" placement="top" v-for="blog in blogs">
                    <el-card>
                        <h4>
                            <router-link :to="{name: 'BlogDetail',params: {blogId: blog.id}}">
                                {{blog.title}}
                            </router-link>
                        </h4>
                        <p>{{blog.description}}</p>
                    </el-card>
                </el-timeline-item>
            </el-timeline>
        </div>

        <div class="page">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :current-page="currentPage"
                    :page-size="size"
                    :total="total"
                    @current-change="page">
            </el-pagination>
        </div>

    </div>

</template>

<script>
    import Header from "../components/Header";

    export default {
        name: "BlogList",
        components: {Header},
        data() {
            return {

                blogs: [{
                    id: 1,
                    status: 0,
                    content: "正文1",
                    created: new Date(),
                    description: "摘要1",
                    title: "标题1",
                    userId: 1
                }, {
                    id: 2,
                    status: 0,
                    content: "正文2",
                    created: new Date(),
                    description: "摘要2",
                    title: "标题2",
                    userId: 2
                }],
                //当前页数
                currentPage: 1,
                //总页数
                pages: 1,
                //总条数
                total: 2,
                //每页条数
                size: 0,

            }
        },
        methods: {
            //翻页
            page(currentPage) {
                const that = this
                that.$axios.get('/blog/list?currentPage=' + currentPage).then(rest => {
                    that.blogs = rest.data.data.records
                    that.currentPage = rest.data.data.current
                    that.total = rest.data.data.total
                    that.size = rest.data.data.size
                    that.pages = rest.data.data.pages
                })
            }
        },
        created() {
            this.page(1);
        }
    }
</script>

<style scoped>
    .page {
        text-align: center;
    }

    .block a{
        text-decoration: none;
        color: black;
    }
    .block a:hover{
        color: red;
    }
</style>
